<script setup lang="ts">
import addDataStore from '@/store/modules/addDataStore';
import { handleDelKey } from '@/utils';
import { searchConfig } from './config/search-config';
import { tableConfig } from './config/table-config';
import { editConfig } from './config/edit-config';
import { Plus, Delete } from '@element-plus/icons-vue';
import {
    doGetCustomerInformationList,
    doDelCustomerInformation,
    doUpdateCustomerInformation
} from '@/api/base/customerInformation';
import type { CustomerInformationListInfo } from '@/api/base/customerInformation/model/type';

defineOptions({
    name: 'CustomerInformationList'
});

const router = useRouter();
const { handleAddData } = addDataStore();

/**
 * @: 表格新增
 */
const handleAdd = () => {
    handleAddData('customerAddData');
    tableRef.value?.clearSelection();
    router.push('/customerInformation/add');
};

/**
 * 搜索模块
 */
const tableRef = ref<TableRef>();
const searchRef = ref<SearchRef>();
const selectIds = ref<number[]>([]);
const customerList = ref<CustomerInformationListInfo[]>([]);
const handleSelection = (list: CustomerInformationListInfo[]) => {
    customerList.value = list;
    selectIds.value = list.map((item: CustomerInformationListInfo) => item.id!);
};

const { handleDel, rowDel } = useDelRow(tableRef, selectIds, doDelCustomerInformation); // 删除数据

/**
 * @: 编辑相关
 */
const baseEditRef = ref<EditRef>();
const handleEdit = (row: CustomerInformationListInfo) => {
    baseEditRef.value?.open(row);
};

const handleEditSave = (data: CustomerInformationListInfo) => {
    const params = handleDelKey(data, ['createTime', 'menuChildren', 'updateTime']);
    return doUpdateCustomerInformation(params);
};
</script>

<template>
    <q-page>
        <base-search
            ref="searchRef"
            :search-config="searchConfig"
            :table-ref="tableRef"
        ></base-search>
        <base-table
            ref="tableRef"
            :tableConfig="tableConfig"
            :getDataFn="doGetCustomerInformationList"
            @selectionChange="handleSelection"
            @edit="handleEdit"
            @del="rowDel"
        >
            <template #tableHeadStart>
                <el-button type="primary" :icon="Plus" @click="handleAdd"> 新增</el-button>
            </template>
            <template #tableHeadEnd>
                <el-button
                    :icon="Delete"
                    :disabled="!selectIds.length"
                    class="m-r-16"
                    @click="handleDel(`选中${selectIds.length}行数据，删除后无法恢复，确认删除？`)"
                    >删除</el-button
                >
            </template>
        </base-table>

        <!-- 编辑 -->
        <base-edit
            ref="baseEditRef"
            :edit-config="editConfig"
            :updateFn="handleEditSave"
            :table-ref="tableRef"
            :column="true"
            width="600px"
        >
        </base-edit>
    </q-page>
</template>
